<template>
  <div class="app-container detail">
    <!-- <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="任务基本信息" name="1"> <BasicInfo></BasicInfo> </el-tab-pane>
      <el-tab-pane label="客户信息" name="4"> <Customer></Customer> </el-tab-pane>
      <el-tab-pane label="检查内容" name="2"> <Content></Content> </el-tab-pane>
      <el-tab-pane label="影像资料采集" name="3"> <Viewdata></Viewdata> </el-tab-pane>
    </el-tabs> -->
    <div>
      <el-row class="bgc">
        <el-col :span="24">任务基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
        <el-form-item label="任务编号">
          <el-input v-model="loanInfo.taskId" disabled />
        </el-form-item>
        <el-form-item label="借据编号">
          <el-input v-model="loanInfo.loanId" disabled />
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="loanInfo.contractId" disabled />
        </el-form-item>
        <el-form-item label="客户号">
          <el-input v-model="loanInfo.customerId" disabled />
        </el-form-item>
        <el-form-item label="检查类型">
          <el-input v-model="loanInfo.checkType" disabled />
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="loanInfo.customerName" disabled />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-input v-model="loanInfo.customerType" disabled />
        </el-form-item>
        <el-form-item label="放款日期">
          <el-input v-model="loanInfo.loanDate" disabled />
        </el-form-item>
        <el-form-item label="担保到期日">
          <el-input v-model="loanInfo.loanMaturityDate" disabled />
        </el-form-item>
        <el-form-item label="业务种类">
          <el-input v-model="loanInfo.businessVariety" disabled />
        </el-form-item>
        <el-form-item label="担保方式">
          <el-input v-model="loanInfo.guarantyStyle" disabled />
        </el-form-item>
        <el-form-item label="还款方式">
          <el-input v-model="loanInfo.repaymentMethod" disabled />
        </el-form-item>
        <el-form-item label="任务生成日期">
          <el-input v-model="loanInfo.taskCreateDate" disabled />
        </el-form-item>
        <el-form-item label="要求完成日期">
          <el-input v-model="loanInfo.taskDueDate" disabled />
        </el-form-item>
        <el-form-item label="实际完成日期">
          <el-input v-model="loanInfo.actualDueDate" disabled />
        </el-form-item>
        <el-form-item label="主管客户经理">
          <el-input v-model="loanInfo.manager" disabled />
        </el-form-item>
        <el-form-item label="任务执行机构">
          <el-input v-model="loanInfo.executionAgency" disabled />
        </el-form-item>
        <el-form-item label="任务执行人">
          <el-input v-model="loanInfo.executor" disabled />
        </el-form-item>
        <el-form-item label="所在机构">
          <el-input v-model="loanInfo.employerAgency" disabled />
        </el-form-item>
      </el-form>
    </div>

    <!-- <div>
      <el-row class="bgc">
        <el-col :span="24">客户信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="140px" :model="formLabelAlign" :inline="true">
        <el-form-item label="姓名">
          <el-input v-model="formLabelAlign.openBank" disabled />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="formLabelAlign.openAddr" disabled />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.cardNo" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话1">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="联系电话2">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="现居住地址">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="工作单位备注">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="配偶姓名">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="是否有工作单位">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
        <el-form-item label="个人月收入(元)">
          <el-input v-model="formLabelAlign.userName" disabled />
        </el-form-item>
      </el-form>
    </div> -->

    <div>
      <el-row class="bgc">
        <el-col :span="24">抵押物质状况</el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="抵质押物类型" align="center" prop="collateralType" :show-overflow-tooltip="true" />
        <el-table-column label="抵质押物名称" align="center" prop="collateralName" :show-overflow-tooltip="true" />
        <el-table-column label="抵质押人" align="center" prop="collateralOwner" :show-overflow-tooltip="true" />
        <el-table-column label="评估价值" align="center" prop="appraisalValue" :show-overflow-tooltip="true" />
        <el-table-column label="认定价值" align="center" prop="confirmedValue" :show-overflow-tooltip="true" />
      </el-table>
      <el-form :label-position="labelPosition" label-width="360px" :model="colateralInfo" :inline="true">
        <el-form-item label="是否办妥登记手续？">
          <el-input v-model="colateralInfo.registrationStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.registrationStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="是否购买保险？">
          <el-input v-model="colateralInfo.insuranceStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.insuranceStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物所有权是否清晰？">
          <el-input v-model="colateralInfo.ownershipStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.ownershipStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物是否完好？">
          <el-input v-model="colateralInfo.conditionStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.conditionStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物是否被有关机关依法查封、冻结、扣押？">
          <el-input v-model="colateralInfo.seizureStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.seizureStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="是否存在重复抵押">
          <el-input v-model="colateralInfo.duplicateMortgageStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.duplicateMortgageStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物市场价格是否下降">
          <el-input v-model="colateralInfo.marketValueStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.marketValueStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物变现能力是否下降">
          <el-input v-model="colateralInfo.realizationCapacityStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.realizationCapacityStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
        <el-form-item label="抵质押物使用情况是否发生变化">
          <el-input v-model="colateralInfo.usageStatus" disabled />
          <!-- <el-switch v-model="colateralInfo.usageStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" /> -->
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">客户基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="360px" :model="baseInfo" :inline="true">
        <el-form-item label="联系地址、联系方式是否发生变化？">
          <el-switch v-model="baseInfo.contactChangeStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="家庭状况是否发生变化、是否对还款产生影响？">
          <el-switch v-model="baseInfo.familyChangeStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="家庭财务状况是否出现重大负债？">
          <el-switch v-model="baseInfo.financialDebtStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="担保人(实际控制人)及其亲属是否出现突发或？">
          <el-switch v-model="baseInfo.healthAccidentStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="抵质押物是否被有关机关依法查封、冻结、扣押？">
          <el-switch v-model="baseInfo.repaymentImpactStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="是否存在重复抵押">
          <el-switch v-model="baseInfo.badBehaviorStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
        <el-form-item label="抵质押物市场价格是否下降">
          <el-switch v-model="baseInfo.repaymentIntentionStatus" class="mb-2" active-text="是" inactive-text="否" active-value="是" inactive-value="否" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">检查结论</el-col>
      </el-row>
      <el-form :label-position="labelPosition" :model="checkList" label-width="360px" :inline="true">
        <el-form-item label="是否检查异常">
          <el-switch v-model="checkList.checkExceptionStatus" class="mb-2" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="对我行的授信风险状况总体评价、主要风险点、建议风险分类结果及理由等">
          <el-input v-model="checkList.riskClassificationResult" disabled type="textarea" />
        </el-form-item>
        <el-form-item label="建议采取具体的描述及说明">
          <el-input v-model="checkList.suggestionDescription" disabled type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24">影像资料</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(现场检查影像信息)</div>
            <div class="box_flex">
              <div v-for="(item, index) in customerLoanData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(楼盘合作协议)</div>
            <div class="box_flex">
              <div v-for="(item, index) in fieldInspectionImageData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="flexImg">
            <div style="margin-bottom: 5px">按揭楼盘保后(商品房预售许可证)</div>
            <div class="box_flex">
              <div v-for="(item, index) in guarantorData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
          <div class="flexImg">
            <div style="margin-bottom: 5px">其他资料</div>
            <div class="box_flex">
              <div v-for="(item, index) in otherData" :key="index" class="box">
                <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item" />
                <div v-else class="img_box">暂无图片</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div></div>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import router from "@/router";
import { getInfo, getBasic, getCollateralList, getConInfo, getCollateralInfo, getInfoImage } from "@/api/guarantee";
const route = useRoute();
const labelPosition = ref("right");

const url = ref("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");
const state = reactive({
  loanInfo: {}, //担保信息
  colateralInfo: {}, //抵押物质状况
  baseInfo: {}, //基本信息
  imageList: {}, //影像照片
  checkList: {}, //检查结论
  otherData: [],
  customerLoanData: [],
  fieldInspectionImageData: [],
  guarantorData: [],
});
const tableList = ref([]); //抵押物列表
const loading = ref(false);
const { loanInfo, colateralInfo, baseInfo, imageList, checkList, otherData, customerLoanData, fieldInspectionImageData, guarantorData } = toRefs(state);
const activeName = ref("1");

function getInfoList() {
  Promise.all([
    getBasic(route.query.taskId),
    getInfo(route.query.customerId),
    getCollateralList(route.query.taskId),
    getConInfo(route.query.customerId),
    getCollateralInfo(route.query.id),
    getInfoImage(route.query.taskId),
  ]).then((res) => {
    console.log(res, "详情");
    loanInfo.value = res[0].data ? res[0].data : {};
    baseInfo.value = res[1].data ? res[1].data : {};
    tableList.value = res[2].data ? res[2].data : {};
    checkList.value = res[3].data ? res[3].data : {};
    if (res[4].data != null) {
      colateralInfo.value = res[4].data;
    }

    if (res[5].data != null) {
      imageList.value = res[5].data;
      if (imageList.value.otherData != null && imageList.value.otherData != "") {
        otherData.value = imageList.value.otherData.split(",");
      } else {
        imageList.value.otherData = "";
        otherData.value = imageList.value.otherData.split(",");
      }

      if (imageList.value.customerLoanData != null && imageList.value.customerLoanData != "") {
        customerLoanData.value = imageList.value.customerLoanData.split(",");
      } else {
        imageList.value.customerLoanData = "";
        customerLoanData.value = imageList.value.customerLoanData.split(",");
      }

      if (imageList.value.fieldInspectionImageData != null && imageList.value.fieldInspectionImageData != "") {
        fieldInspectionImageData.value = imageList.value.fieldInspectionImageData.split(",");
      } else {
        imageList.value.fieldInspectionImageData = "";
        fieldInspectionImageData.value = imageList.value.fieldInspectionImageData.split(",");
      }

      if (imageList.value.guarantorData != null && imageList.value.guarantorData != "") {
        guarantorData.value = imageList.value.guarantorData.split(",");
      } else {
        imageList.value.guarantorData = "";
        guarantorData.value = imageList.value.guarantorData.split(",");
      }
    }
  });
}

getInfoList();
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}
.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  display: inline-block;
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}
:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}
</style>
